<!doctype html>
<html>
<head>
<style>
*{ margin:0; padding:0; list-style:none; }
#div1{ width:1px;height:100%; position:absolute; background:black;left: 50%;}
#le,#rt{
	width: 100px;height: 100px;background: green;position: absolute;left: -100px;
	top: 200px;
}
#rt{
	background: red;left: 1px;
}

</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>


<body>
<div id="div1">
	
	<div id='le'></div>
	<div id='rt'></div>
</div>
<script type="text/javascript">
	

	le.onmousedown = function(e){
	var ev=e || event;
	var l = ev.clientX - this.offsetLeft;
	var t = ev.clientY - this.offsetTop;
	var oldL = le.offsetLeft;
	var oldRl = rt.offsetLeft;
	document.onmousemove = function(e){
		var ev = e || event;
		var needL = ev.clientX - l;
		var needT = ev.clientY - t;
		console.log(needL - oldL);
		le.style.left = needL +'px';
		le.style.top =  needT + 'px';
		rt.style.top = needT + 'px';
		rt.style.left = oldRl - (needL - oldL) + 'px';

	};
	document.onmouseup = function(){
		document.onmousemove =document.onmouseup = null;
	};
	return false;
}

</script>

</body>
</html>
